.wrapper {
  width: auto !important;
  display: inline-flex;
  align-items: center;
  position: relative;

  &:hover {
    cursor: pointer;
  }
}

.check {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 4px;
  transform: rotate(90deg);
  opacity: 0;
  color: white;
  pointer-events: none;
  transition: all 0.2s var(--bezier-snappy);
}

.label {
  margin-left: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-paragraph);

  &:hover {
    cursor: pointer;
  }
}

.checkbox {
  width: 24px;
  height: 24px;
  margin: 0;
  appearance: none;
  background-color: white;
  border-radius: 4px;
  position: relative;
  transition-duration: 0.2s;
  transition-timing-function: var(--bezier-snappy);
  transition-property: background-color, border-color, box-shadow, transform;
  border: 2px solid var(--color-base-200);

  &:hover {
    cursor: pointer;
    border-color: var(--color-base-300);
  }

  &:checked, &.indeterminate {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: 0 2px 4px 0 rgba(#6469FF, 0.3);

    ~ .label {
      color: var(--color-black);
    }
  }

  &:checked {
    ~ .check {
      opacity: 1;
      pointer-events: auto;
      transform: rotate(0deg);
    }

  }

  &.indeterminate {
    ~ .line {
      opacity: 1;
      pointer-events: auto;
      transform: rotate(0deg);
    }

    ~ .check {
      opacity: 0;
      transform: rotate(90deg);
      pointer-events: none;
    }
  }

  &:disabled {
    cursor: not-allowed;
    background-color: var(--color-base-100);
    border-color: var(--color-base-100);

    &:checked {
      background-color: var(--color-base-200);
      box-shadow: none;
    }

    ~ .check,
    ~ .label {
      cursor: not-allowed;
      color: var(--color-base-300);
    }
  }
}

.line {
  background: white;
  width: 10px;
  height: 2px;
  border-radius: 4px;
  position: absolute;
  transform: rotate(90deg);
  opacity: 0;
  left: 7px;
  pointer-events: none;
  transition: all 0.2s var(--bezier-snappy);
}

.checkboxes {
  display: flex;
  flex-direction: column;
  padding-left: 16px;
  margin-top: 8px;

  > .wrapper:not(:first-of-type) {
    margin-top: 8px;
  }
}
